<template>
	<div class="itemContent" @click="handleClick({name: 'item'})">
		<div class="topBox">
			<div class="bg">
				<img :src="item.coverImg"/>
			</div>
			<div class="overlay" v-if="item.registrationStatus !== 1">
				<img src="@/assets/未开始.png" v-if="item.registrationStatus == 0" />
				<img src="@/assets/已结束.png" v-if="item.registrationStatus == 2" />
				<div>{{ [t('projectCard','报名时间已截止'), t('control','招募中'), t('projectCard','报名时间已截止')][item.registrationStatus] }}</div>
			</div>
			<div v-if="needCollect">
				<img class="collect" @click.stop="handleClick({name: '取消收藏', item})" v-if="item.collectFlag" src="@/assets/收藏3.png" />
				<img class="collect" @click.stop="handleClick({name: '收藏', item})" v-else src="@/assets/收藏4.png" />
			</div>
		</div>
		<div class="infoBox">
			<div class="status">
				<span>{{ {0: t("control","未开始"), 1: t("control","招募中") , 2: t("control","已截止") }[item.learningStatus] }}</span>
				<a-dropdown v-if="hasOperate">
					<EllipsisOutlined style="font-size: 20px;" @click.stop="false" />
					<template #overlay>
						<a-menu >
							<a-menu-item :key="item.value" v-for="item in newStructure.more" @click="handleClick({name: item.value})">{{item.label}}</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>
			<div class="line">
				<a-tooltip placement="topLeft">
					<template #title>
						<span >{{item.name}}</span>
					</template>
					<div class="name ellipsis" >{{ item.name }}</div>
				</a-tooltip>
				<div class="difficulty">
				</div>
			</div>
			<div class="type">
				<span :style="{ color: item.recruitStatus == 0 ? '#8466F5' : '#B5ACCE', fontWeight: 500 }">
 						{{item.recruitStatus==0?t('control','未招满') :  t('control','已招满')}}
 					</span>
				<div class="grade" v-if='item.grade'>{{item.grade}} {{ t('projectCard','级') }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { EllipsisOutlined } from '@ant-design/icons-vue'
import { ref, defineProps, defineEmits, watch } from 'vue'
import { isTeacher } from "@/stores/info"
import { t } from '@/i18n'

const emit = defineEmits(['handleClick'])

const { item, structure, hasOperate } = defineProps({
	item: Object,
	structure: {
		type: Array,
		default: []
	},
	needCollect: {
		type: Boolean,
		default: true
	},
	hasOperate: {
		type: Boolean,
		default: true
	},
})
const newStructure = ref()
const init = () => {
	
	newStructure.value = {
		more: item.status ? [
			{ label: t('projectCard', '下线'), value: '下线' },
			{ label: t('projectCard', '删除项目'), value: '删除项目' }
		] : [
			{ label: t('projectCard', '上线'), value: '上线' },
			{ label: t('projectCard', '删除项目'), value: '删除项目' }
		],
		...structure,
	}
}
init()
watch(() => item, () => init())
console.log(item.status, 'item.status')

const handleClick = ({name}) => {
	emit('handleClick', {name, item})

	// switch (name) {
	// 	case 'itemContent':
	// 		emit('handleClick', {name, item})
	// 		break
	// 	case 'collect':
	// 		emit('handleClick', {name, item})
	// 		break
	// 	case 'more':
	// 		console.log(item.key)
	// 		emit('handleClick', {name, item})
	// 		break
	// }
}
</script>

<style lang="scss" scoped>
	.itemContent {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		box-shadow: 0px 3px 10px 0px #E3E2FF;
		border-radius: 6px;
		overflow: hidden;
		.topBox {
			position: relative;
			width: 100%;
			height: 160px;
			.bg {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				background-image: url('path/to/your/background-image.jpg');
				background-size: cover;
				background-position: center;

				img{
					width: 100%;
    				height: 100%;
    				object-fit: cover;
				}
			}
			.overlay {
				width: 100%;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: rgba(255, 255, 255, 0.8);
				white-space: nowrap;
				text-align: center;
				margin: 0;
				img {
					width: 32px;
					margin-bottom: 5px;
					margin-top: 3px;
				}
			}
			.collect {
				cursor: pointer;
				position: absolute;
				z-index: 2;
				left: 10px;
				bottom: 10px;
				width: 24px;
				height: 24px;
			}
		}
		.infoBox {
			display: flex;
			flex-direction: column;
			padding:13px 16px;
			.status {
				font-size: 14px;
				display: flex;
				justify-content: space-between;
			}
			.line {
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.name {
				font-size: 16px;
				width: 100%;
			}
			.difficulty {
				font-size: 14px;
				display: flex;
				align-items: center;
				text-wrap: nowrap;
				margin-left: 6px;
			}
			.type {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				margin-top: 10px;
				.grade{
					font-weight: 500;
					font-size: 14px;
					color: #B5ACCE;
				}
				.category {
					border-radius: 27px;
					text-align: center;
					padding:4px 10px;
					background: #EEEEFF;
					border: 1px solid #D7D5FF;
					font-weight: 500;
					font-size: 12px;
					color: #8466F5;
				}
			}
		}

	}
</style>